{% macro chart2(month, year, uid) %}
<script type="text/javascript">
    // 日况
    $(document).ready(function () {
        $.ajax({
            url: "{{ url_for('data.get_data') }}",
            type: 'POST',
            data: { 'type': '1', 'month': '{{month}}', 'year': '{{year}}', 'uid':'{{uid}}'},  //用引号套起来，避免编辑器语法报错
            success: function (data) {
                console.log('{{year}} {{month}}');
                // 基于准备好的dom，初始化echarts实例
                var myChart = echarts.init(document.getElementById('chart2'), 'wonderland');

                // 指定图表的配置项和数据
                var dataX = data.x;
                var dataA = data.pday;
                var dataB = data.pday_l;
                var colorA = 'rgba(0, 255, 0, 0.8)';
                var colorB = 'rgba(255, 0, 0, 0.7)';

                var option = {
                    // 备注：可以修改一下title的内容
                    title: {
                        text: '本月学习 ' + data.hours_all + ' 小时',
                        subtext: '上月此时 ' + data.hours_all_l + ' 小时 | 今日 ' + data.today_hour + ' 小时, 日均 ' + data.average_hour + ' 小时, ',
                    },
                    tooltip: {
                        text: 'hello'
                    },

                    legend: {
                        data: ['上月', '本月'],
                    },

                    // 设置 X 轴
                    xAxis: {
                        type: 'category',
                        data: dataX
                    },
                    // 设置 Y 轴
                    yAxis: {
                        type: 'value'
                    },
                    // 设置数据系列
                    series: [{
                        name: '本月',
                        type: 'line',
                        data: dataA,
                        color: '#009fcc', //青蓝
                    }, {
                        name: '上月',
                        type: 'line',
                        data: dataB,
                        color: 'gray',
                    },

                    // 2 填充实现
                    {
                        // 用于绘制面积 - 2线B
                        type: 'line',
                        areaStyle: {
                            color: colorB
                        },
                        data: dataB.slice(0, dataA.length),
                        symbol: 'none',
                        lineStyle: {
                            width: 0,  //隐藏线条
                        },
                    }, {
                        // 用于绘制面积 - 1线A
                        type: 'line',
                        areaStyle: {
                            color: colorA,
                        },
                        data: dataA,
                        symbol: 'none',
                        lineStyle: {
                            width: 0,  //隐藏线条
                        },
                    },],
                    
                    media: mergeMedia([{
                        query: {maxHeight: 1000},
                        option: {
                            title:{
                                left: 'right',
                            }
                        }
                    }]),
                };

                // 使用刚指定的配置项和数据显示图表。
                myChart.setOption(option);
            },
            error: function (xhr, status, error) { console.error('Error', error); },
        });
    });
</script>
{% endmacro %}